<template>
  <div class="relative w-full h-full">
    <div class="border-bottom mb12">
      <PageHeader :title="$t('couponManagement.couponDetails')">
        <template #right>
          <el-button type="primary" @click="goBack" size="small">
            <SvgIcon name="iconfanhui" color="#fff" class="mr4"></SvgIcon>
            {{ $t('couponManagement.backToPage') }}
          </el-button>
        </template>
      </PageHeader>
    </div>
    <div class="titleRow pl10">{{ $t('couponManagement.basicInfo') }}</div>
    <div class="flex_aic mt15" v-for="item in info" :key="item.name">
      <div class="label">{{ $t(item.name) }}</div>
      <div class="value">{{ item.value }}</div>
    </div>
    <div class="titleRow pl10 mt15">{{ $t('couponManagement.collectionRules') }}</div>
    <div class="flex_aic mt15">
      <div class="label">{{ $t('couponManagement.limitPerPerson') }}</div>
      <div class="value">{{ $t('couponManagement.limitCollection', { times: 11 }) }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const router = useRouter();
const { t } = useI18n();

const info = ref([
  {
    name: "couponManagement.couponType",
    value: t('couponManagement.discountCoupon'),
  },
  {
    name: "couponManagement.couponName",
    value: "测试",
  },
  {
    name: "couponManagement.totalIssued",
    value: "11",
  },
  {
    name: "couponManagement.stackable",
    value: t('couponManagement.allow'),
  },
  {
    name: "couponManagement.applicableProducts",
    value: t('couponManagement.allProducts'),
  },
  {
    name: "couponManagement.activityTime",
    value: "2025-03-20 18:35:00 ~ 2025-03-23 18:36:00",
  },
  {
    name: "couponManagement.useTime",
    value: "2025-03-20 18:36:00 ~ 2025-03-30 22:00:00",
  },
  {
    name: "couponManagement.collectionMethod",
    value: t('couponManagement.freeCollection'),
  },
  {
    name: "couponManagement.discountInfo",
    value: t('couponManagement.discountDescription', { amount: 11 }),
  },
]);

const goBack = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.border-bottom {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
}
.titleRow {
  width: 100%;
  height: 36px;
  border-radius: 2px;
  background: #fffaf7;
  line-height: 36px;
}

.label {
  width: 200px;
  height: 32px;
  padding-right: 20px;
  font-size: 13px;
  line-height: 32px;
  text-align: right;
  &:before {
    content: "*";
    color: #ff4d4f;
  }
}
</style>
